<template>
	<el-card>
		<div slot="header" class="clearfix">
			<span>编辑用户</span>
		</div>
		<el-form label-position="right" label-width="80px" :model="form" ref='form' :rules="rules">
			<el-form-item label="用户名">
				<el-input v-model="form.username" readonly></el-input>
			</el-form-item>
			<el-form-item label="昵称" prop="nickname">
				<el-input v-model="form.nickname"></el-input>
			</el-form-item>
			<el-form-item label="性别">
				<el-radio-group v-model="form.sex">
					<el-radio label="男"></el-radio>
					<el-radio label="女"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="手机" prop="tel">
				<el-input v-model="form.tel"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click='handleSave'>保存修改</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import { User } from "@/api/";
	export default {
		props:['id'],
		data() {
			return {
				
				form: {
					username: '',
					nickname: '',
					sex: '',
					tel: '',
				},
				rules: {
					nickname: [
						{ required: true, message: '请输入昵称!', trigger: 'blur' },
						{ min: 2, max: 30, message: '长度在2-30个字符!', trigger: 'blur' }
					],
					tel: [
						{ required: true, message: '请输入手机号码!', trigger: 'blur' },
						{
							pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
							message: '请输入手机号码!',
							trigger: 'blur'
						}
					]
				},
			};
		},
		watch:{
			'$route'(to,from){
			//加载id对应的个人资料
			this.loadDetail(this.id);	
			}
		},
		created() {

			//加载id对应的个人资料
			this.loadDetail(this.id);
		},
		methods: {
			async loadDetail(id) {
				let { status, data } = await User.info({ id });
				console.log(User.info({ id }));
				console.log(User.list());
				if (status) {
					this.form = data;
				}
			},
			handleSave() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						let { status, msg } = await User.edit(this.id, { ...this.form })
						if (status) {
							this.$message.success(msg);
							//跳转页面
							this.$router.replace('/user/list')
						} else {
							this.$message.error(msg)
						}
					}

				});
			}
		}
	}
</script>

<style>

</style>
